{% extends "../base_adminlte.html" %}

{% block content %}
<div class="content-wrapper">
  <section class="content-header">
    <h1>
      PlayBook 任务
      <small>编辑页面</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
      <li class="active">Ansible 任务</li>
    </ol>
  </section>

  <section class="content">

      <h3 style="text-align: center; color:#3c8dbc;">执行Ansible Playbook</h3>
  <form method="GET" action="/ansible/opt_task/">{% csrf_token %}
      <div class="row">
          <div class="col-sm-6">
              <div class="form-group">
                  <label for="exampleInputEmail1">组列表</label>
                  <select name="groupName" class="form-control">
                      <option value="None">无需该参数</option>
                      {% for g in groups %}
                          <option value={{ g.groupName }}>
                              {{ g.nickName|default:g.groupName }}&nbsp;<------>&nbsp;{{ g.groupName }}
                          </option>
                      {% endfor %}
                  </select>
                </div>
          </div>
          <div class="col-sm-6">
              <div class="form-group">
                  <label for="exampleInputPassword1">任务组</label>
                  <select class="form-control" name="playbook">
                      <option value="None">选择一个任务组</option>
                      {% for f in functions %}
                          <option value="{{ f.playbook }}">{{ f.nickName|default:f.playbook }}</option>
                      {% endfor %}
                  </select>
                </div>
          </div>

      </div>
    <div class="form-group">
      <label for="exampleInputPassword1">输入所需要的参数</label>
      <textarea type="text" class="form-control" name="vars" rows=9></textarea>
    </div>
    <button type="submit" id="push" class="btn btn-default">提交</button><input type="checkbox" style="margin-left: 50px;"> 🔐&nbsp提交锁，防止误提交。
  </form>
      <div calss="row">
          <hr style="height:1px;border:none;border-top:1px solid #555555;">
          <div class="panel panel-default" id="mydata" hidden>
                  <div class="panel-body"></div>
                </div>
              <button id="check_group"class="btn btn-default">查看选中组</button>
              <button id="check_playbook" class="btn btn-default">查看选中PlayBook</button>
              <button id="close_win" class="btn btn-info">关闭信息窗口</button>
      </div>
  </div>

  </div>
  <script type="text/javascript">
      $('#check_group').click(function(){
          v = $("select[name='groupName'] option:selected")[0].value
          if(v==="None"){
              alert("未选择组")
          }else{
              $.ajax({
                  url: "/ansible/get_groups/"+v,
                  success: function(msg){
                      $('#mydata')[0].hidden = false
                      s = "组名: " + msg.groupName + '<br>描述: ' + msg.nickName + '<br>主机列表:'
                      $.each(msg.hosts, function(a,b){
                          s += b.hostName + '、'
                      })
                      $('#mydata')[0].children[0].innerHTML = s
                      console.log(msg)
                  }
              })
          }

      })
      $('#check_playbook').click(function(){
          console.log("AAA")
      })
      $('#close_win').click(function(){
          $('#mydata')[0].hidden = true
      })
      $('#push').click(function(){
          if($("select[name='playbook'] option:selected")[0].value=="None"){
              alert('必须选择一个操作组')
              return false    // 阻止提交
          }else if($('input[type="checkbox"]')[0].checked===false){
              alert('请打开锁 🔐')
              return false
          }else{
              return true
          }

      })

  </script>
  </section>
</div>

{% endblock %}
